<template>
  <div>
    <el-tabs type="border-card" v-model="tabView">
      <div class="btn-group" v-show="btnGroup">
        <Button type="info" size="small" @click="del">删除行</Button>
        <Button type="info" size="small" @click="add">添加行</Button>
      </div>
      <div class="btn-group" v-show="btnGroupS">
        <Button type="info" size="small" @click="exports">导出</Button>
      </div>
      <el-tab-pane :lazy="true" label="常用联系人" name="1">
        <vol-table ref="tableList" :loadKey="true" :columns="columns" :pagination-hide="false"
          :height="300" :defaultLoadPage="false" :row-index="true" :columnIndex="true" url=""
          :index="true" :click-edit="true" :tableData="tableData1" :ck="false"></vol-table>
      </el-tab-pane>
      <el-tab-pane :lazy="true" label="会员卡" name="2">
        <vol-table ref="tableList2" :loadKey="true" :columns="columns2" :pagination-hide="false"
          :height="300" :defaultLoadPage="false" :row-index="true" url="/api/MebCard/GetMebCard"
          :columnIndex="true" @loadBefore="loadBefore2" @loadAfter="loadAfter" :index="true"
          :click-edit="true" :ck="false"></vol-table>
      </el-tab-pane>
      <el-tab-pane :lazy="true" label="优惠券" name="3">
        <vol-table ref="tableList3" :loadKey="true" :columns="columns3" :pagination-hide="false"
          :height="300" :defaultLoadPage="false" :row-index="true" :columnIndex="true"
          url="/api/MebCouponhis/GetPageData_Allow" @loadBefore="loadBefore2" :index="true"
          :click-edit="true" :ck="false"></vol-table>
      </el-tab-pane>
      <el-tab-pane :lazy="true" label="消费记录" name="4">
        <vol-table ref="tableList4" :loadKey="true" :columns="columns4" :pagination-hide="false"
          :height="300" :defaultLoadPage="false" :row-index="true" url="/api/Water/WaterGetPageData"
          @loadBefore="loadBefore4" :columnIndex="true" :index="true" :click-edit="true"
          :ck="false"></vol-table>
      </el-tab-pane>
      <el-tab-pane :lazy="true" label="储值账户" name="5">
        <vol-table ref="tableList5" :loadKey="true" :columns="columns5" :pagination-hide="false"
          :height="300" :defaultLoadPage="false" :row-index="true" url="" :columnIndex="true"
          @loadBefore="loadBefore" :index="true" :click-edit="true" :ck="false"></vol-table>
      </el-tab-pane>
      <el-tab-pane :lazy="true" label="积分账户" name="6">
        <vol-table ref="tableList6" :loadKey="true" :columns="columns6" :pagination-hide="false"
          :height="300" :defaultLoadPage="false" :row-index="true" url="" :columnIndex="true"
          @loadBefore="loadBefore" :index="true" :click-edit="true" :ck="false"></vol-table>
      </el-tab-pane>
      <el-tab-pane :lazy="true" label="车辆信息" name="7">
        <vol-table ref="tableList7" :loadKey="true" :columns="columns7" :pagination-hide="false"
          :height="300" :defaultLoadPage="false" :row-index="true"
          url="/api/member_car/GetPageDatacar" :columnIndex="true" @loadBefore="loadBefore"
          :endEditAfter="endEditAfter" :index="true" :click-edit="true"></vol-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import VolTable from "@/components/basic/VolTable.vue";
var vueParam = {
  components: {
    VolTable,
  },
  data() {
    return {
      columns: [
        {
          field: "name",
          title: "姓名",
          type: "string",
          width: 100,
          edit: { type: "text" },
        },
        {
          field: "c_gender",
          title: "性别",
          width: 100,
          edit: { type: "select" },
          bind: { key: "gender", data: [] },
        },
        {
          field: "phone",
          title: "手机号",
          type: "phone",
          width: 140,
          edit: { type: "phone" },
        },
        {
          field: "certificate_type",
          title: "证件类型",
          bind: { key: "certificate_type", data: [] },
          width: 120,
          align: "left",
          edit: { type: "select" },
        },
        {
          field: "certificate_number",
          title: "证件号",
          type: "string",
          width: 220,
          align: "left",
          edit: { type: "text" },
        },
        {
          field: "",
          title: "是否禁用",
          type: "string",
          width: 220,
          align: "left",
          edit: { type: "switch" },
        },
        {
          field: "address",
          title: "详细地址",
          type: "string",
          width: 200,
          align: "left",
          edit: { type: "text" },
        },
      ],
      tableData1: [],
      columns2: [
        {
          field: "cardno",
          title: "卡号",
          type: "string",
          width: 100,
          align: "left",
        },
        {
          field: "cardcode",
          title: "内编码",
          type: "string",
          width: 100,
          align: "left",
        },
        {
          field: "cardname",
          title: "卡名称",
          type: "decimal",
          width: 100,
          align: "left",
        },
        {
          field: "cardtype",
          title: "卡类型",
          type: "decimal",
          bind: {
            key: "cardTemplate",
            data: [],
          },
          width: 140,
          align: "left",
        },
        {
          field: "validatedateTime",
          title: "有效期",
          type: "string",
          width: 240,
          align: "left",
        },
        {
          field: "is_enabled",
          title: "是否启用",
          type: "string",
          width: 120,
          align: "left",
          edit: { type: "switch" },
        },
        {
          field: "bind_time",
          title: "绑定时间",
          type: "string",
          width: 140,
          align: "left",
        },
      ],
      columns3: [
        {
          field: "couponid",
          title: "优惠券id",
          type: "string",
          width: 210,
          align: "left",
          sortable: true,
        },
        {
          field: "couponcode",
          title: "优惠码",
          type: "string",
          width: 270,
          align: "left",
        },
        {
          field: "use_status",
          title: "使用状态",
          type: "int",
          width: 90,
          align: "left",
          bind: { key: "MebHisUseStatus", data: [] },
        },
        {
          field: "use_starttime",
          title: "开始使用时间",
          type: "datetime",
          width: 170,
        },
        {
          field: "use_endtime",
          title: "结束使用时间",
          type: "datetime",
          width: 170,
        },
        {
          field: "receive_starttime",
          title: "开始领取时间",
          type: "datetime",
          width: 170,
        },
        {
          field: "receive_endtime",
          title: "结束领取时间",
          type: "datetime",
          width: 170,
        },
        {
          field: "card_day",
          title: "有效期固定天数",
          type: "datetime",
          width: 170,
        },
        {
          field: "is_enabled",
          title: "是否启用",
          type: "string",
          width: 120,
          align: "left",
          edit: { type: "switch" },
        },
      ],
      columns4: [
        {
          field: "orderNo",
          title: "订单号",
          type: "decimal",
          width: 170,
          align: "left",
        },
        {
          field: "status",
          title: "消费类型",
          type: "select",
          bind: { key: "Transaction_Types", data: [] },
          width: 100,
          align: "left",
        },
        {
          field: "payMoney",
          title: "消费金额",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "spare2",
          title: "订单来源",
          type: "string",
          width: 120,
          align: "left",
          bind: { key: "Distribution_Channels", data: [] },
        },
        {
          field: "payTime",
          title: "消费日期",
          type: "string",
          width: 150,
          align: "left",
        },
      ],
      columns5: [
        {
          field: "status",
          title: "凭证号",
          type: "select",
          width: 100,
          align: "left",
        },
        {
          field: "payMoney",
          title: "账户ID",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "orderNo",
          title: "时间",
          type: "datetime",
          width: 170,
          align: "left",
        },
        {
          field: "spare2",
          title: "操作类型",
          type: "string",
          width: 120,
          align: "left",
          bind: { key: "Distribution_Channels", data: [] },
        },
        {
          field: "payTime",
          title: "金额",
          type: "string",
          width: 150,
          align: "left",
        },
        {
          field: "payTime",
          title: "余额",
          type: "string",
          width: 150,
          align: "left",
        },
        {
          field: "payTime",
          title: "备注",
          type: "string",
          width: 150,
          align: "left",
        },
      ],
      columns6: [
        {
          field: "status",
          title: "凭证号",
          type: "select",
          width: 100,
          align: "left",
        },
        {
          field: "payMoney",
          title: "积分ID",
          type: "string",
          width: 120,
          align: "left",
        },
        {
          field: "orderNo",
          title: "时间",
          type: "datetime",
          width: 170,
          align: "left",
        },
        {
          field: "spare2",
          title: "操作类型",
          type: "string",
          width: 120,
          align: "left",
          bind: { key: "Distribution_Channels", data: [] },
        },
        {
          field: "payTime",
          title: "积分",
          type: "string",
          width: 150,
          align: "left",
        },
        {
          field: "payTime",
          title: "积分余额",
          type: "string",
          width: 150,
          align: "left",
        },
        {
          field: "payTime",
          title: "备注",
          type: "string",
          width: 150,
          align: "left",
        },
      ],
      columns7: [
        {
          field: "car_id",
          title: "car_id",
          width: 10,
          align: "left",
          hidden: true,
        },
        {
          field: "car_brand",
          title: "品牌",
          width: 120,
          align: "left",
          edit: { type: "text" },
        },
        {
          field: "car_model",
          title: "型号",
          width: 100,
          align: "left",
          edit: { type: "text" },
        },
        {
          field: "car_color",
          title: "颜色",
          width: 140,
          align: "left",
          edit: { type: "text" },
        },
        {
          field: "car_number",
          title: "车牌号",
          width: 120,
          align: "left",
          edit: { type: "text" },
        },
        {
          field: "car_status",
          title: "车状态",
          width: 120,
          align: "left",
          edit: { type: "select" },
          bind: {
            key: "",
            data: [
              {
                key: 1,
                value: "未预约",
              },
              {
                key: 2,
                value: "已预约",
              },
              {
                key: 3,
                value: "已入园",
              },
            ],
          },
        },
      ],
      tabView: "1",
      member: {},
      btnGroup: false,
      btnGroupS: false,
    };
  },
  watch: {
    tabView(n) {
      if (n == "7") {
        this.btnGroup = true;
      } else {
        this.btnGroup = false;
      }
      if (n == "4") {
        this.btnGroupS = true;
      } else {
        this.btnGroupS = false;
      }
    },
  },
  methods: {
    loadBefore(param, callBack) {
      param.sort = "id";
      param.wheres = [
        {
          name: "memberid",
          value: this.member.member_phone,
          displayType: "text",
        },
      ];
      callBack(true);
    },
    loadBefore2(param, callBack) {
      param.sort = "id";
      param.wheres = [
        {
          name: "memberid",
          value: this.member.member_phone,
          displayType: "text",
        },
      ];
      callBack(true);
    },
    loadBefore4(param, callBack) {
      param.sort = "id";
      param.wheres = [
        { name: "phone", value: this.member.member_phone, displayType: "text" },
      ];
      callBack(true);
    },
    loadAfter(param) {
      param.forEach((e) => {
        e.validatedateTime = e.validatedate + "-" + e.validendatedate;
      });

      console.log(param);
      return true;
    },
    getTable() {
      let param = {
        userId: this.member.id,
      };
      this.http
        .post("/api/Small_user_contact/GetUserContact", param)
        .then((res) => {
          this.tableData1 = res.data;
        });
    },
    del() {
      let rows = this.$refs.tableList7.getSelected();
      if (rows.length == 0) {
        return this.$Message.error("请先选中行");
      }
      this.$refs.tableList7.delRow();
    },
    add() {
      let parmas = {
        mainData: {
          memberid: this.member.memberid,
          car_brand: "",
          car_model: "",
          car_color: "",
          car_number: "",
          car_status: "",
        },
        detailData: [],
      };
      this.http.post("/api/member_car/Addmemcar", parmas).then((res) => {
        this.$refs.tableList7.addRow(JSON.parse(res.data).data);
      });
    },
    exports() {
      this.http
        .post("/api/Water/Export", {
          sort: "id",
          order: "desc",
          page: 1,
          rows: 1000,
          wheres: `[{\"name\":\"phone\",\"value\":\"${this.member.member_phone}\",\"displayType\":\"text\"}]`,
        })
        .then((res) => {
          if (res.status) {
            //下载导出的文件
            let xmlResquest = new XMLHttpRequest();
            xmlResquest.open(
              "GET",
              this.http.ipAddress + "api/Water/DownLoadFile?path=" + res.data,
              true
            );
            xmlResquest.setRequestHeader("Content-type", "application/json");
            xmlResquest.setRequestHeader(
              "Authorization",
              this.$store.getters.getToken()
            );
            xmlResquest.responseType = "blob";
            xmlResquest.onload = function (oEvent) {
              if (xmlResquest.status != 200) {
                this.$error("下载文件出错了..");
                return;
              }
              let content = xmlResquest.response;
              let elink = document.createElement("a");
              elink.download = "消费记录.xlsx";
              let blob = new Blob([content]);
              elink.href = URL.createObjectURL(blob);
              elink.click();
            };
            xmlResquest.send();
          }
        });
    },
    endEditAfter(e) {
      let parmas = {
        mainData: {
          ...e,
          car_id: e.car_id,
        },
        detailData: null,
      };
      this.http.post("/api/member_car/Updatecar", parmas);
    },
  },
};
export default vueParam;
</script>
<style lang="less" scoped>
.btn-group {
  margin-bottom: 10px;
  overflow: hidden;
  .ivu-btn {
    float: right;
    margin-right: 10px;
  }
}
</style>
